import React, { Component } from 'react';
import { NavBar, Space } from 'antd-mobile'
import { MoreOutline, AntOutline } from 'antd-mobile-icons'
import "../assets/font_icon/iconfont.css"
import { connect } from "react-redux"
import {request_create_uncollect} from "../store/ationCreactor"
class Collection extends Component {
    // 返回我的页面
    onback() {
        this.props.history.push("/index/mine")
    }
    render() {
        return (
            <div className='collection'>
                <NavBar onBack={() => { this.onback() }} back='返回' right={<div style={{ fontSize: 24 }}>
                    <Space style={{ '--gap': '6px' }}>
                        <MoreOutline style={{ fontSize: 36, verticalAlign: "middle" }} />
                        <AntOutline style={{ fontSize: 30, verticalAlign: "middle" }} />
                    </Space>
                </div>}>
                    <div style={{ fontSize: 20, fontWeight: 700 }}>收藏列表</div>
                </NavBar>
                <div className="collelist">
                    {
                        this.props.collection && this.props.collection.map((item, index) => {
                            return (
                                <div className="colle" key={index}>
                                    <img src={item.pic} alt="" />
                                    <div className="colleright">
                                        <div className="name">{item.brandEN}{item.brand}{item.name}</div>
                                        <div className="money">
                                            <span>￥{item.salesPrice.value}</span>
                                            <button onClick={()=>{this.props.uncollect(item)}}>取消请求</button>
                                        </div>
                                    </div>
                                </div>
                            )
                        })
                    }
                </div>
            </div>
        );
    }
}

export default connect(
    (state) => {
        return {
            "collection": state.collection
        }
    },
    (dispatch) => {
        return {
            uncollect(params){
            dispatch(request_create_uncollect(params))
            }  
        }
    }
)(Collection);